sticky bölümlerle sahne kurmak

Sitedeki bütün geçişler tek bir fikirden çıkıyor: kaydırma bir konum değil, bir zaman çizelgesi. Bunu kabul ettiğiniz an sayfa yazmayı bırakıp sahne kurmaya başlıyorsunuz.

scroll bir zaman çizelgesi

Mekanik basit. Bir bölüm ekran yüksekliğinden çok daha uzun oluyor; içindeki sahne ise ekrana sabitleniyor. Siz kaydırdıkça sahne yerinde kalıyor, ama bölümün içinde ne kadar ilerlediğiniz 0 ile 1 arasında bir sayıya dönüşüyor.

Bütün animasyon o tek sayıya bağlı: bulutlar açılıyor, metin yükseliyor, panel yukarıdan gelip sahneyi kapatıyor. Zamanı siz kontrol ediyorsunuz — hızlanabilir, durabilir, geri sarabilirsiniz.

"Scroll’u zaman gibi düşündüğün an, sayfa bir sahneye dönüşür."

bölüm yüksekliği = sahne süresi

En çok vakit alan iş animasyonlar değil, süreler oldu. Bir sahne uzun hissettiriyorsa çözüm animasyonu hızlandırmak değil, bölümü kısaltmak. Sahne süresini CSS yüksekliğiyle yazıyorsunuz.

İki kural işi kurtardı: hiçbir sabit sahne iki ekran boyundan uzun olmasın, ve sahne bittiğinde bir sonraki içerik sahnenin üzerine kaysın — boş bir geçiş bırakmayın. Yoksa okuyucu sahneyi değil, kaydırma çubuğunu izlemeye başlıyor.

Ortaya çıkan şey bir video değil, bir tempo. Ve o tempoyu kullanıcı belirliyor.